html
	head
		meta(charset="utf-8")
		meta(name="viewport",content="width=device-width,initial-scale=1")
		title 登录
		link(rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous")
		link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css")
	body
		nav.navbar.navbar-inverse
			.container
				.navbar-header
					span.navbar-brand 协同考勤管理
		div
			.dialog
				.dialogheader
					h4 登录
				.dialogbody
					form.formlogin
						.from-group
							label.form-control-label 用户名
							input.form-control#username(autofocus="autofocus")
						.from-group
							label.form-control-label 密码
							input.form-control#username(autofocus="autofocus")
						button.btn(type="submit") 登录
	style.
		body{
		background-image: url('images/fenmian3.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		}
		h4{
		font-size:28px;
		margin:0;
		padding:20px;
		color:#fff;
		}
		nav.navbar.navbar-inverse{
		margin:0;
		}
		.dialogheader{
		background-color:#32a7b8;
		}
		.dialogbody{
		margin:20px;
		}
		.dialog button{
		margin-top:10px;
		background-color:#32a7b8;
		color:#fff;
		}
		.from-group,label{
		margin-bottom:10px;
		}
		.form-control{
		border:1px solid #ced4da;
		padding:20px;
		}
		.navbar-inverse .navbar-brand{
		color:#32a7b8;
		font-weight:700px;
		}
		@media (min-width: 576px) {
			.dialog{
			border:1px solid #32a7b8;
		    border-radius:5px;
			max-width:500px;
			margin:8rem auto 0 auto;
			}
		}

